<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />

		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">
			body {
				font-size: 14px;
				padding: 15px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

			p {
				margin: 30px 10px;
			}

			#list, #entertainment, #health, #romance {
				max-width: 640px;
			}

			#textimage {
				float: left;
				height: 140px;
				width: 100px;
				margin-right: 4px;
			}

			#paragraph {
				padding-left: 8px;
				margin: 0;
				text-align: justify;
				line-height: 18px;
			}

			/* Overrides button class */
			.nokia-button-wrapper {
				margin: 5px auto;
			}
		</style>
		
	</head>

	<body>
		
		<h1>Nokia.CustomizableList - Sample</h1>

		<br/><br/>

		<div id="list"></div>

		<div id="item2" class="ui-helper-clearfix">
			<img src="images/carousel02.jpg" id="textimage" />
			<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

			<br style="clear:both;" />
		</div>

		<div id="item1" class="ui-helper-clearfix">
			<img src="images/carousel01.jpg" id="textimage" />
			<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

			<br style="clear:both;" />
			<span id="button" class="btn"></span>
		</div>

		<div id="item3" class="ui-helper-clearfix">
			<img src="images/carousel04.jpg" id="textimage" />
			<p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

			<br style="clear:both;" />
		</div>

		<script type="text/javascript" charset="utf-8">

			var init = function() {
				
				if (window.widget) {
					widget.setNavigationEnabled(false);
				}

				window.list = new Nokia.CustomizableList({
					element: '#list',
					visible: true,
					create: function() {
						console.log("Customizable List: Create");
					},
					show: function(openerTransitionList) {
						console.log("Customizable List: Show", openerTransitionList);
					},
					hide: function() {
						console.log("Customizable List: Hide list1.");
					},
					addItem: function(event, item) {
						console.log("Customizable List: AddItem", item);
					},
					removeItem: function(event, item) {
						console.log("Customizable List: RemoveItem", item);
					}
				});

				window.btn = new Nokia.Button({
					element: '#button',
					label: 'Remove',
					width: '100%',
					click: function() {
						list.removeItem('#item1');
					}
				});

				list.addItem('Examples of contents inside a customizable list. This is only text.');
				list.addItem('#item1');
				list.addItem('#item2');
				list.addItem('#item3');
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>loading</span>');
			
			Nokia.use('button', 'customizablelist', init);

		</script>

	</body>
</html>